import Link from 'next/link'; // 导入 Link 组件

export default function HistoricalArticles({ articles, theme }) {
    return (
        <aside className={`w-full md:w-[30%] ${theme === 'dark' ? 'bg-black text-white' : 'bg-gray-100 text-black'} p-4`}>
            <h2 className={`text-2xl font-bold mb-4 ml-4 ${theme === 'dark' ? 'text-white' : 'text-black'}`}>历史文章</h2>

            <div className="space-y-2">
                {articles
                    .slice()
                    .sort((a, b) => b.id - a.id)
                    .map((article) => {
                        const imageUrls = JSON.parse(article.imageUrls);
                        const backgroundImage = imageUrls.length > 0 ? imageUrls[0] : '/login7-1.jpg';

                        return (
                            <Link href={`/article/${article.id}`} key={article.id}> {/* 使用 Link 组件进行跳转 */}
                                <div className={`p-4 ${theme === 'dark' ? 'bg-black text-white' : 'bg-gray-100 text-black'} rounded-lg h-20 flex cursor-pointer`}>
                                    <div
                                        className="w-1/3 h-full rounded-l-lg"
                                        style={{ backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
                                    ></div>
                                    <div className="w-2/3 flex items-center font-bold pl-4">
                                        <p>{article.title}</p>
                                    </div>
                                </div>
                            </Link>
                        );
                    })}

                {/* 让下划线长度和文字宽度保持一致 */}
                <Link href={`/historyArticles`}>
                    <div className={`inline-block text-left mt-4 ml-4 ${theme === 'dark' ? 'text-white' : 'text-black'} border-b-2 border-current pb-1 hover:border-opacity-100`}>
                        查看更多
                    </div>
                </Link>
            </div>
        </aside>
    );
}
